<template>
  <el-dialog title="关联家庭成员" v-model="dialogVisible" style="width:450px; height: 500px; padding:10px;" :before-close="handleClose" >
    <el-form label-width="120px" label-position="right" style="padding:40px;">
      <el-form-item>
        <template #label>
          成员名<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入成员名" v-model="familyName"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          年龄<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入年龄" v-model="familyAge"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          性别<span class='red-star'>*</span>
        </template>
        <el-select placeholder="请选择" v-model="familyGender">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          关系<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入关系" v-model="familyRelation"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="padding:40px;">
        <el-button @click="handleClose" size="large">取消</el-button>
        <el-button type="primary" size="large" @click="addRelation">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-card style="width: 80%; height: 95%; margin:20px auto 0px; padding: 5px 10px;">
    <div style="font-size: 20px;color: black; margin-bottom: 20px;">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">编辑签约信息</span>
    </div>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>居民信息</span>
    </div>

    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              姓名<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入姓名" v-model="dataForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              身份证号<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入身份证号" v-model="dataForm.idcard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              性别<span class='red-star'>*</span>
            </template>
            <el-select placeholder="请选择" v-model="dataForm.gender">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="出生年月">
            <el-date-picker type="date" placeholder="请选择" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="dataForm.birthDate" style="position: relative;bottom: 8px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              联系电话<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入联系电话" v-model="dataForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地">
            <el-input placeholder="请输入现居地" v-model="dataForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="家庭成员">
        <el-card v-for="item in relationship" style="width: 220px; height: 90px; margin-right: 30px; position: relative;cursor: pointer;">
          <img v-if="item.gender==1" src="/img/common/male.png" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
          <img v-else src="/img/common/female.jpg" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
          <div style="width: 100px; height: 50px; color: #999999; margin-left: 15px; display: inline-block; position: relative; bottom: 5px">
            <span style="font-size: 18px; color: black;">{{ item.name }}</span>
            &nbsp;
            <span>{{ item.age }}岁</span>
            <div>
              <span>关系：</span>
              <span>{{ item.relation }}</span>
            </div>
          </div>
          <img src="/img/common/tip.png" alt="" style="transform: rotate(-25deg); position: absolute; top: 25px">
        </el-card>
        <el-button link type="primary" @click="dialogVisible = true;" style="margin-left: 20px">+关联家庭成员</el-button>
      </el-form-item>
    </el-form>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>签约信息</span>
    </div>
    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="签约编号">
            <el-text class="mx-1" size="large" style="color: black">{{dataForm.signedContractId}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约状态">
            <el-text v-if="statusType==1" class="mx-1" size="large" style="color: rgb(40, 208, 148)">待审核</el-text>
            <el-text v-if="statusType==2" class="mx-1" size="large" style="color: rgb(253, 219, 137)">待支付</el-text>
            <el-text v-if="statusType==3" class="mx-1" size="large" style="color: rgb(250, 116, 150)">已驳回</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              签约机构<span class='red-star'>*</span>
            </template>
            <el-select placeholder="请选择" v-model="dataForm.signedInstitutionId" style="width: 300px;">
              <el-option v-for="item in institutionArr" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              签约医生<span class='red-star'>*</span>
            </template>
            <el-select placeholder="请选择" v-model="dataForm.doctorId">
              <el-option v-for="item in doctorArr" :label="item.doctorName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              服务项目<span class='red-star'>*</span>
            </template>
            <el-select placeholder="请选择" v-model="dataForm.serviceItemsId">
              <el-option v-for="item in serviceItemsArr" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费用">
            <el-text class="mx-1" size="large" style="color: black">{{fee}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="申请时间">
            <el-text class="mx-1" size="large" style="color: black">{{dataForm.applicatedTime}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              生效日期<span class='red-star'>*</span>
            </template>
            <el-date-picker type="date" placeholder="请选择" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="dataForm.startValidatingDate" style="position: relative;bottom: 8px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <el-form-item label="签约备注">
        <el-input
            v-model="dataForm.note"
            style="width: 800px;position: relative;top:10px"
            :rows="6"
            type="textarea"
            placeholder="请输入签约备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save" size="large">保存</el-button>
      <el-button @click="handleReturn" size="large">返回</el-button>
    </template>
  </el-card>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";
import _ from 'lodash';

let signId = '';
const initialDataForm = ref({});
const dataForm = ref({});
const statusType = ref();
const relationship = ref([]);
const institutionArr = ref([]);
const doctorArr = ref([]);
const serviceItemsArr = ref([]);
const isDataFormChanged = computed(() => {
  return !_.isEqual(dataForm.value, initialDataForm.value);
});
onMounted(() => {
  signId = new URLSearchParams(window.location.search).get('id');
  axios.get(BASE_URL+'/hhmc/sign/select/'+signId).then((response)=>{
    if(response.data.code == 2000){
      dataForm.value = response.data.data;
      initialDataForm.value = _.cloneDeep(dataForm.value);
      if (dataForm.value.status == '待审核') {
        statusType.value = 1;
      }
      else if (dataForm.value.status == '待支付') {
        statusType.value = 2;
      }
      else if (dataForm.value.status == '已驳回') {
        statusType.value = 3;
      }
      getFamilyInfo(dataForm.value.patientId);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
  loadData(institutionArr,'institution');
  loadData(doctorArr,'user');
  loadData(serviceItemsArr,'items');
});

const getFamilyInfo = (id)=>{
  axios.get(BASE_URL + '/hhmc/patient/getFamilyInfo/'+ id).then((response) => {
    if (response.data.code == 2000) {
      relationship.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const fee = computed(() => {
  for (let i = 0; i < serviceItemsArr.value.length; i++) {
    if (serviceItemsArr.value[i].id == dataForm.value.serviceItemsId) {
      return serviceItemsArr.value[i].fee;
    }
  }
});

const patientForm = computed(() => {
  let arr = {};
  arr.id = dataForm.value.patientId;
  arr.name = dataForm.value.name;
  arr.idcard = dataForm.value.idcard;
  arr.gender = dataForm.value.gender;
  arr.birthDate = dataForm.value.birthDate;
  arr.phone = dataForm.value.phone;
  arr.address = dataForm.value.address;
  return arr;
});

const signForm = computed(() => {
  let arr = {};
  arr.id = signId;
  arr.signedInstitutionId = dataForm.value.signedInstitutionId;
  arr.doctorId = dataForm.value.doctorId;
  arr.serviceItemsId = dataForm.value.serviceItemsId;
  arr.applicatedTime = dataForm.value.applicatedTime;
  arr.startValidatingDate = dataForm.value.startValidatingDate;
  arr.note = dataForm.value.note;
  return arr;
});


const save = ()=>{
  if (isDataFormChanged.value == false) {
    ElMessage.info('签约信息未发生变化');
    return;
  }
  else {
    let data1 = qs.stringify(patientForm.value);
    let data2 = qs.stringify(signForm.value);
    console.log(data1);
    console.log(data2);
    axios.post(BASE_URL+'/hhmc/patient/update', data1).then((response)=>{
      if(response.data.code == 2000){
        axios.post(BASE_URL+'/hhmc/sign/update', data2).then((res)=>{
          if(res.data.code == 2000){
            ElMessage.success('保存成功!');
            router.push('/signing')
          }else{
            ElMessage.error(res.data.msg);
          }
        })
      }else{
        ElMessage.error('保存失败');
      }
    })
  }
}


const dialogVisible = ref(false);
const handleClose = ()=>{
  dialogVisible.value = false;
  familyName.value = '';
  familyAge.value = '';
  familyGender.value = '';
  familyRelation.value = '';
}
const addFamilyMember = ref({});
const familyName = ref('');
const familyAge = ref('');
const familyGender = ref('');
const familyRelation = ref('');
const addRelation = ()=>{
  if (familyName.value == '' || familyAge.value == '' || familyGender.value == '' || familyRelation.value == '') {
    ElMessage.error('请填写完整！');
    return;
  }
  addFamilyMember.value = {};
  addFamilyMember.value.patientId = dataForm.value.patientId;
  addFamilyMember.value.name = familyName.value;
  addFamilyMember.value.age = familyAge.value;
  addFamilyMember.value.gender = familyGender.value;
  addFamilyMember.value.relation = familyRelation.value;
  let data = qs.stringify(addFamilyMember.value);
  axios.post(BASE_URL+'/hhmc/patient/addFamilyMember', data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('添加成功！');
      setTimeout(() => {
        getFamilyInfo(dataForm.value.patientId);
      }, 1000);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
  handleClose();
}
const handleReturn = ()=>{
  if(confirm('您确认要返回待处理签约页面吗?')){
    router.push('/signing')
  }
}

</script>

<style scoped>
  hr {
    background-color: rgb(242,247,251);
    height:1px;
    border:none;
    margin-bottom: 20px
  }

  :deep(.el-select) {
    width: 220px;
    .el-select__wrapper {
      height: 45px;
    }
    .el-select__selection.is-near::after {
      content: '请选择';
      line-height: 45px;
      color: rgb(176, 171, 185);
      font-size: 14px;
      margin-left: 8px;
      margin-top: 1px;
    }
    .el-select__selection.is-near .el-select__selected-item {
      display: none;
    }
  }
  :global(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
    background-color: white !important;
  }

  :deep(.el-form-item__label) {
    height: 45px;
    line-height: 45px;
    color: #999999;
    font-size: 15px;
  }

  .el-button {
    width: 70px;
    height: 45px;
    font-size: 15px;
  }

  :deep(.el-input) {
    width: 220px;
    .el-input__wrapper {
      height: 45px;
    }
    .el-input__inner{
      border:0;
      height: 45px;
    }
    .el-input__icon{
      height: 45px;
      font-size: 18px;
    }
  }

  .red-star {
    color: red;
    font-size: 16px;
    font-weight: 300;
    margin-left: 1px;
  }
</style>